<template>
	<div>
		<Card class='card-border'>
			<Row>
				<Col span='12'>
					<div>
						<div style='width:3px;height:15px;background:#06A0FD;border-radius:2px;margin-right:8px;margin-top: 6px;float: left'></div>
						<span style='font-size: 18px;color:#464C5B'>账户余额</span>
					</div>
					<p style='font-size: 36px;color:#333;margin-top:10px'>¥ {{accountMoney}}</p>
				</Col>
				<Col span='12' style='text-align: right'>
					<button class='btn-charge btn-hover' @click='charge' style='border-radius:16px'>充值</button>
				</Col>
			</Row>
		</Card>
		<div style='background:#fff;'>
			<Tabs value="" @on-click='tabChange'>
		        <TabPane label="全部" name=""></TabPane>
		        <TabPane label="充值" name="2"></TabPane>
		        <TabPane label="消费" name="1"></TabPane>
		    </Tabs>
		    <div style='padding:24px'>
		    	<Table :columns="financeList" :data="financeData" stripe></Table>
		    	<div style='overflow: hidden'>
		    		<Page :total="pagination.rowCount" :page-size='pagination.pageSize' @on-change='changePage' style='float: right;margin: 20px 0;'></Page>
		    	</div>
		    </div>
		</div>
		<!-- 充值 -->
		<Modal v-model="modal" width="600">
	        <p slot="header">
	            <span>账户充值</span>
	        </p>
	        <div>
		        <RadioGroup v-model="chargeType" class='charge-radio'>
			        <Radio label="0">在线充值</Radio>
			        <Radio label="1">线下汇款</Radio>
			    </RadioGroup>
			    <div v-if='chargeType==0'>
			    	<p style='font-size:14px;margin: 28px 0 12px'>选择充值金额</p>
				    <div v-for="(item,index) in chargeMoney" class='sms' @click="selectMoney(item,index)">
	                    <div :class="{'selected' : select_index == index}" class='sms-wrap'>
	                        <div style='width: 100%'>
	                            <p style='font-size:18px;color:#464C5B'>¥ {{item.price}}</p>
	                            <p style="font-size: 13px;color: #657180;margin-top: 8px"> 售价 ¥{{item.discount_price}}元</p>
	                        </div>
	                    </div>
	                </div>
	                <div class='sms' @click="othersMoney">
	                    <div :class="{'selected' : select_index == chargeMoney.length}" class='sms-wrap'>
	                        <div style='width: 100%'>
	                            <p style='font-size:18px;color:#464C5B'>其他金额</p>
	                        </div>
	                    </div>
	                </div>
	                <div style="clear: both;"></div>
	                <Input v-show='select_index == chargeMoney.length' v-model='otherMoney' :maxlength='7' style='margin-top: 10px' placeholder='请输入充值金额' @on-keyup='moneyBlur' number></Input>
	                <p style='font-size:14px;margin: 18px 0 12px'>充值方式</p>
	                <div style='overflow:hidden;margin-bottom: 22px'>
			            <div class='pay-border' style='margin-right:20px' :class='{bordered:payway==1}' @click='selectPay(1)'>
			            	<i class='iconfont icon-zhifubao' style='font-size:28px;color:#06A0FD'></i>
			            </div>
			            <!-- <div class='pay-border' :class='{bordered:payway==2}' @click='selectPay(2)'>
			            	<i class='iconfont icon-weixinzhifu1' style='font-size:28px;color:#41b035;'></i>
			            </div> -->
		            </div>
		            <p style='font-size:14px'>需支付 <span style='color:#F68250;'>¥ {{money}}</span></p>
			    </div>
			    <div v-else style='margin-bottom: 24px'>
			    	<div class='account'>
			    		<i class='iconfont icon-nongyeyinhang account-icon'></i>
			    		<div class='account-info'>
			    			<div class='account-name'>开户名称
			    				<span class='account-desc'>河南青否网络科技有限公司</span>
			    			</div>
			    			<div class='account-name'>开户银行
			    				<span class='account-desc'>中国农业银行股份有限公司郑州阳光新城支行</span>
			    			</div>
			    			<div class='account-name'>银行账户
			    				<span class='account-desc'>16035701040004832</span>
			    			</div>
			    		</div>
			    	</div>
			    	<div style='line-height: 1'>
			    		<div style='overflow:hidden;margin-bottom: 20px'>
			    			<div style='width:3px;height: 14px;background:#06A0FD;float:left'></div>
			    			<div style='float:left;font-size:14px;margin-left: 6px;'>线下汇款处理说明</div>
			    		</div>
			    		<p class='shuoming'>1.如果您选择线下汇款，请按照以上账户信息进行汇款</p>
			    		<p class='shuoming'>2.线下公司转账方式的到账时间是1 - 3 个工作日</p>
			    		<p class='shuoming'>3.汇款后请在 2 个工作日内将汇款凭证拍照发给我司微信客服：qingfouyun</p>
			    	</div>
			    </div>
	        </div>
	        <div slot="footer">
	            <button class='btn-cancel' @click="cancel">取消</button>
	            <button class='btn-sure' @click="sure">确认</button>
	        </div>
	    </Modal>
	</div>
</template>
<script type="text/javascript">
	export default{
		data(){
			return{
				modal:false,
				payway:1,//支付方式
				financeList: [
                    {
                        title: '单号',
                        key: 'orderid'
                    },
                    {
                        title: '金额',
                        key: 'money'
                    },
                    {
                        title: '类型',
                        key: 'type',
                        render: (h, params) => {
                            return h('div', [
                                h('span', params.row.type == 1 ? '消费' : '充值')
                            ]);
                        }

                    },
                    {
                        title: '状态',
                        key: 'status',
                        render:(h,params)=>{
                            let styleObj = {
                                    padding:'5px',
                                    borderRadius:'6px'
                                }
                            if(params.row.status==0){
                                styleObj.background = '#eee';
                            }else{
                                styleObj.background = '#06A0FD';
                                styleObj.color = '#fff';
                            }
                            return h('div',[
                                    h('span',{
                                        style:styleObj
                                    },params.row.status==0?'未完成':'已完成')
                                ])
                        }
                    },
                    {
                        title: '时间',
                        key: 'created_at',
                        render: (h, params) => {
                            return h('div', [
                                h('span', this.format(params.row.created_at))
                            ]);
                            
                        }
                    }
                ],
                financeData: [],
                pagination:{},
                accountMoney:0,	// 账户余额
                money:95,		// 充值金额
                chargeType:0,
                chargeMoney:[],
                select_index:0,
                otherMoney:100
			}
		},
		created(){
			this.$bus.emit('updateMainMenuActive',this.$route.fullPath);
			this.getData();
		},
		methods:{
			getData(page){
				let url = '/home/finance';
				let arr = [];
				if(page){
					arr.push('page='+page)
				}
				if(this.type){
					arr.push('type='+this.type)
				}
				if(arr.length){
					url += '?' + arr.join('&');
				}
				
				this.fetch(url).then(res=>{
					if(res&&res.data.data&&res.data.code){
						this.accountMoney = res.data.data.costLog.money;
						this.financeData = res.data.data.costLog.data;
						this.pagination = res.data.data.costLog.pagination;
						this.chargeMoney = res.data.data.recharge;
					}
				})
			},
			changePage(page){
				this.getData(page);
			},
			tabChange(type){
				this.type = type;
				this.getData();
			},
			charge(){
				this.modal = true;
				this.chargeType = 0;
				this.select_index = 0;
			},
			//选择支付方式
			selectPay(type){
				this.payway = type;
			},
			//选择充值金额
			selectMoney(item,index){
				this.select_index = index;
				this.money = item.discount_price;
			},
			othersMoney(){
				this.select_index = this.chargeMoney.length;
				if(this.chargeMoney.length){
					this.otherMoney = this.chargeMoney[0].price;
					this.money = this.chargeMoney[0].discount_price;
				}
				
			},
			moneyBlur(){
				if(!Number(this.otherMoney)){
					this.otherMoney = parseInt(this.otherMoney) || 0;
				}
				if(this.otherMoney<100){
					this.money = this.otherMoney;
				}else if(this.otherMoney<500 && this.otherMoney>=100){
					this.money = (this.otherMoney*0.95).toFixed(2);
				}else if(this.otherMoney>=500 && this.otherMoney<1000){
					this.money = (this.otherMoney*0.9).toFixed(2);
				}else if(this.otherMoney>=1000 && this.otherMoney<3000){
					this.money = (this.otherMoney*0.85).toFixed(2);
				}else if(this.otherMoney>=3000 && this.otherMoney<10000){
					this.money = (this.otherMoney*0.8).toFixed(2);
				}else if(this.money>=10000 && this.otherMoney<=20000){
					this.money = (this.otherMoney*0.75).toFixed(2);
				}else{
					this.money = (this.otherMoney*0.7).toFixed(2);
				}
			},
			cancel(){
				this.modal = false;
			},
			sure(){
				//线下汇款
				if(this.chargeType == 1){
					this.modal = false;
					return;
				}
				if(!this.money){
					this.$Message.warning('请填写金额')
					return;
				}
				if(!Number(this.money)){
					this.$Message.warning('充值金额为数字类型')
					return;
				}
				if(this.money>1000000){
					this.$Message.warning('你输入的金额过大')
					return;
				}
				this.fetch('/home/tradeAdd',{
					price:this.money,
					type:'支付宝'
				}).then(res=>{
					if(res&&res.data.code){
						this.getData();
						if (res.data.data.tradeid) {
                            this.alipayTrade(res.data.data.id);
                        } else {
                            location.href = '/home/index/money'
                        }
					}
				})
			}
		}
	}
</script>
<style scoped>
	.btn-charge{
		width:100px;
		height:32px;
		line-height: 32px;
		background: #06A0FD;
		color:#fff;
		border-radius: 15px;
		margin-top: 25px;
		font-size: 14px;
	}
	.btn-charge:hover{
		background: rgba(26,160,253,0.9);
	}
	.pay-border{
		width:100px;
		height:40px;
		border:1px solid #d7dde4;
		float:left;
		cursor:pointer;
		text-align: center
	}
	.bordered{
		border:1px solid #06A0FD;
	}
	.pay-border img{
		width:100%;height:100%;
	}
	.card-border{
		height:150px;
		padding:15px 40px;
		background: #fff;
		margin-bottom: 16px
	}
	.sms{
        cursor: pointer;
        float:left;
        margin-right: 16px;
        margin-bottom: 16px;
        line-height: 1;
    }
    .sms:nth-of-type(4n){
         margin-right: 0;
    }
    .sms-wrap{
        width:118px;
        height:72px;
        border:1px solid #D7DDE4;
        border-radius: 4px;
        text-align: center; 
        display: flex;
        align-items: center;
    }
    .selected{
        border: 1px solid #06A0FD !important;
    }
    .account{
    	width:100%;
    	height:110px;
    	border:1px solid rgba(9,216,158,0.6);
    	background: rgba(9,216,158,0.06);
    	border-radius:4px;
    	margin: 30px 0 26px;
    	padding:18px 26px;
    }
    .account-icon{
    	font-size:46px;
    	color:#319C8B;
    	vertical-align: middle
    }
    .account-info{
    	display:inline-block;
    	margin-left: 26px;
    	vertical-align: middle;
    	line-height:1
    }
    .account-name{
    	font-size:14px;
    	color:#464C5B;
    	margin-bottom: 16px
    }
    .account-name:nth-child(3n){
		margin-bottom: 0px
    }
    .account-desc{
    	color:#657180;
    	margin-left:16px
    }
    .shuoming{
		margin-bottom: 12px;
		font-size: 13px
    }
    .shuoming:nth-child(4n){
		margin-bottom:0;
    }
</style>
<style>
	.charge-radio .ivu-radio{
		margin-right: 10px;
	}
	.charge-radio .ivu-radio-wrapper{
		margin-right: 20px;
		font-size: 14px;
	}
</style>
